<template>
    <div>
<table class="table table-bordered">
    <select><option :value="item.name" v-for="item in provinces" :key="item.code">{{ item.name }}</option></select>
    <tbody>
        <tr>
           <td>姓名</td>
           <td>年龄</td>
           <td>性别</td>
           <td>省份</td>
           <td>图片</td>
           <td>时间</td>
        </tr>
        <tr v-for="item in students" :key="item.name">
           <td>{{ item.name }}</td>
           <td>{{ item.age }}</td>
           <td>{{ item.gender?"男":"女" }}</td>
           <td>{{ item.hometown }}</td>
           <td><img :src="item.photo" width="100" height="100"/></td>
           <td>{{ item.birthday.substring(0,10) }}</td>
        </tr>
    </tbody>
</table>
    </div>
</template>

<script setup lang="ts">
import{ref,reactive}from 'vue'
let students = ref([
{
name: '张三',
age: 16,
gender: 0,
hometown: '广东省',
photo:
'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
birthday:'2004-09-20T11:32:09.244927'
},
{
name: '李四',
age: 17,
gender: 1,
hometown: '河北省',
photo:
'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
birthday:'2004-10-22T11:32:09.244927'
},
{
name: '王五',
age: 18,
gender: 1,
hometown: '福建省',
photo:
'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
birthday:'2005-09-25T11:32:09.244927'
},
{
name: '马六',
age: 19,
gender: 0,
hometown: '河南省',
photo:
'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
birthday:'2006-01-25T11:32:09.244927'
},
]);

const provinces = ref([
{ name: '北京市', code: '110000' },
{ name: '天津市', code: '120000' },
{ name: '河北省', code: '130000' },
{ name: '山西省', code: '140000' },
{ name: '内蒙古自治区', code: '150000' },
{ name: '辽宁省', code: '210000' },
{ name: '吉林省', code: '220000' },
{ name: '黑龙江省', code: '230000' },
{ name: '上海市', code: '310000' },
{ name: '江苏省', code: '320000' },
{ name: '浙江省', code: '330000' },
{ name: '安徽省', code: '340000' },
{ name: '福建省', code: '350000' },
{ name: '江西省', code: '360000' },
{ name: '山东省', code: '370000' },
{ name: '河南省', code: '410000' },
{ name: '广西壮族自治区', code: '450000' },
]);

</script>

<style scoped>

</style>